$set()解决vue数组添加数据后却不显示到视图上面的问题。 | 您所在的位置:网站首页 › vue this$set 数组对象 › $set()解决vue数组添加数据后却不显示到视图上面的问题。 |
这几天开发遇到一个这样的问题:在vue实例已经创建好了的时候,当我们再向data里面的数组或对象加入属性时,发现数据不更新到视图上面。 举例说明一下, {{ info.name }} {{ info.age }} {{ info.hobby }} data() { return { info: { name:'lily', age:23, hobby:'draw' } } },页面呈现的效果:(css样式可以自己调整)
现在我们有个需求:mounted函数接收到后端接口后发现缺少所需的变量,那么需要我们前端手动添加。如果我们用 arrary.变量名 或者 arrary["变量名"] 的方式添加,会发现不生效(其实数据已经加入到info中了,但是并没有更新到视图上)。此时我们就需要使用 this.$set()。 这是因为data中的数据是响应式的,我们也需要让添加的元素是响应式的(可以触发视图) this.$set()使用方法:this.$set(object,obj,value) object:要更改的数组或者对象;obj:要添加或者更改的属性(也可以是下标);value:属性的值 还有一些函数也是可以更新视图的,例如pop、push、shift、unshift、splice、sort、reverse这些。 |
CopyRight 2018-2019 实验室设备网 版权所有 |